<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 表单
        </el-breadcrumb-item>
        <el-breadcrumb-item>创建班级</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form ref="school"
                 :model="klass"
                 label-width="80px">
          <el-form-item label="班级名称">
            <el-input v-model="klass.name"></el-input>
          </el-form-item>
          <el-form-item label="所属学校">
            <el-select v-model="klass.schoolId"
                       placeholder="请选择">
              <el-option v-for="item in options"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="getQR()">生成班级码</el-button>
            <el-button type="primary"
                       @click="onSubmit()">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="班级码"
               :visible.sync="inviteShow"
               width="30%">
      <el-image :src="invitePicture"></el-image>
    </el-dialog>
  </div>

</template>

<script>
export default {
    data() {
        return {
            inviteShow: false,
            invitePicture: '',
            school: {
                id: '',
                name: ''
            },
            klass: {
                id: '',
                name: '',
                schoolId: ''
            },
            options: [
                {
                    id: '',
                    name: ''
                }
            ],
            value: '',
            userId: 1
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getQR() {
            this.$axios.get('/manage/admin/qr/invite/').then((res) => {
                // console.log(res.data.data);
                this.invitePicture = 'data:image/jpg;base64,' + res.data.data;
                this.inviteShow = true;
            });
        },
        getData() {
            this.$axios.get('/manage/admin/school/findAllSchool', this.school).then((r) => {
                // console.log(r.data.data);
                this.options = r.data.data;
            });
        },
        onSubmit() {
            if (this.klass.name == null || this.klass.name == '') {
                this.$message({
                    type: 'error',
                    message: '班级名不能为空'
                });
            } else if (this.klass.schoolId == null || this.klass.schoolId == '' || this.klass.schoolId == 0) {
                this.$message({
                    type: 'error',
                    message: '学校名称不能为空'
                });
            } else {
                this.$axios.post('/manage/admin/klass/addKlass', this.klass).then((r) => {
                    this.$axios.get('/auth/admin/getMe').then((r) => {
                        this.klass.masterId = r.data.data.id;
                    });
                    if (r.data.code == 200) {
                        this.$message.success('添加成功');
                        this.klass.id = null;
                        this.klass.name = null;
                        this.klass.schoolId = null;
                        this.getQR();
                    } else {
                        this.$message.warning('添加失败');
                    }
                });
            }
        }
    }
};
</script>

<style>
</style>